<template>
	<div>
		<!-- 图片上传组件辅助 -->
		<el-upload class="avatar-uploader quill-img" :action="uploadImgUrl" name="file" :headers="headers" :show-file-list="false"
		 :on-success="quillImgSuccess" :on-error="uploadError" :before-upload="quillImgBefore" accept='.jpg,.jpeg,.png,.gif'></el-upload>

		<!-- 富文本组件 -->
		<quill-editor class="editor" v-model="content" ref="quillEditor" :options="editorOption" @blur="onEditorBlur($event)"
		 @focus="onEditorFocus($event)" @change="onEditorChange($event)"></quill-editor>
	</div>
</template>

<script>
	import {
		getToken
	} from '@/utils/auth'

	// 工具栏配置
	const toolbarOptions = [
		["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
		["blockquote", "code-block"], // 引用  代码块
		[{
			list: "ordered"
		}, {
			list: "bullet"
		}], // 有序、无序列表
		[{
			indent: "-1"
		}, {
			indent: "+1"
		}], // 缩进
		[{
			size: ["small", false, "large", "huge"]
		}], // 字体大小
		[{
			header: [1, 2, 3, 4, 5, 6, false]
		}], // 标题
		[{
			color: []
		}, {
			background: []
		}], // 字体颜色、字体背景颜色
		[{
			align: []
		}], // 对齐方式
		["clean"], // 清除文本格式
		["link", "image", "video"] // 链接、图片、视频
	];

	import {
		quillEditor
	} from "vue-quill-editor";
	import hljs from 'highlight.js';
	import "quill/dist/quill.core.css";
	import "quill/dist/quill.snow.css";
	import "quill/dist/quill.bubble.css";
	import 'highlight.js/styles/vs2015.css';
	export default {
		props: {
			/* 编辑器的内容 */
			value: {
				type: String
			},
			/* 图片大小 */
			maxSize: {
				type: Number,
				default: 4000 //kb
			}
		},
		components: {
			quillEditor
		},
		data() {
			return {
				content: this.value,
				uploadImgUrl: "",
				editorOption: {
					placeholder: "",
					theme: "snow", // or 'bubble'
					placeholder: "请输入内容",
					modules: {
						toolbar: {
							container: toolbarOptions,
							handlers: {
								image: function(value) {
									if (value) {
										// 触发input框选择图片文件
										document.querySelector(".quill-img input").click();
									} else {
										this.quill.format("image", false);
									}
								}
							}
						},
						syntax: {
							highlight: text => {
								return hljs.highlightAuto(text).value; // 这里就是代码高亮需要配置的地方
							}
						}
					}
				},
				uploadImgUrl: process.env.VUE_APP_BASE_API + "/file/upload", // 上传的图片服务器地址
				headers: {
					Authorization: getToken()
				}
			};
		},
		watch: {
			value:function() {
				this.content = this.value;
			}
		},
		methods: {
			onEditorBlur() {
				//失去焦点事件
			},
			onEditorFocus() {
				//获得焦点事件
			},
			onEditorChange() {
				//内容改变事件
				this.$emit("input", this.content);
			},

			// 富文本图片上传前
			quillImgBefore(file) {
				let fileType = file.type;
				if (fileType === 'image/jpeg' || fileType === 'image/png') {
					return true;
				} else {
					this.$message.error('请插入图片类型文件(jpg/jpeg/png)');
					return false;
				}
			},

			quillImgSuccess(res, file) {
				// res为图片服务器返回的数据
				// 获取富文本组件实例
				let quill = this.$refs.quillEditor.quill;
				// 如果上传成功
				if (res.code == 200) {
					// 获取光标所在位置
					let length = quill.getSelection().index;
					// 插入图片  res.url为服务器返回的图片地址
					quill.insertEmbed(length, "image", res.msg);
					// 调整光标到最后
					quill.setSelection(length + 1);
				} else {
					this.$message.error("图片插入失败");
				}
			},
			// 富文本图片上传失败
			uploadError() {
				// loading动画消失
				this.$message.error("图片插入失败");
			}
		}
	};
</script>

<style>
	.editor {
		line-height: normal !important;
		height: 592px;
	}

	.quill-img {
		display: none;
	}

	.ql-snow .ql-tooltip[data-mode="link"]::before {
		content: "请输入链接地址:";
	}

	.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
		border-right: 0px;
		content: "保存";
		padding-right: 0px;
	}

	.ql-snow .ql-tooltip[data-mode="video"]::before {
		content: "请输入视频地址:";
	}

	.ql-snow .ql-picker.ql-size .ql-picker-label::before,
	.ql-snow .ql-picker.ql-size .ql-picker-item::before {
		content: "14px";
	}

	.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
	.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
		content: "10px";
	}

	.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
	.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
		content: "18px";
	}

	.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
	.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
		content: "32px";
	}

	.ql-snow .ql-picker.ql-header .ql-picker-label::before,
	.ql-snow .ql-picker.ql-header .ql-picker-item::before {
		content: "文本";
	}

	.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
	.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
		content: "标题1";
	}

	.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
	.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
		content: "标题2";
	}

	.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
	.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
		content: "标题3";
	}

	.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
	.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
		content: "标题4";
	}

	.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
	.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
		content: "标题5";
	}

	.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
	.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
		content: "标题6";
	}

	.ql-snow .ql-picker.ql-font .ql-picker-label::before,
	.ql-snow .ql-picker.ql-font .ql-picker-item::before {
		content: "标准字体";
	}

	.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
	.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
		content: "衬线字体";
	}

	.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
	.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
		content: "等宽字体";
	}
</style>
